<template>
	<view>
		<div class="dropdown">
			<view class="current">
				<view class="dropbtn" @click="open">{{ selectedText }}</view>
				<view class="icons"></view>
			</view>
			<view v-show="show" class="bg">
				<view class="dropdown-content">
					<view v-for="(menu, index) in menus" :key="index" @click="select(index)">
						<image :src="menu.icon" v-if="menu.icon"></image>
						<text :class="{ selected: selectedText == menu.text }">{{ menu.text }}</text>
					</view>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
export default {
	props: {
		selected: {
			type: String,
			default: 0
		},

		menus: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			show: false,
			selectedText: ''
		};
	},
	mounted: function() {
		var _this = this;
		this.menus.forEach(function(e, i) {
			if (_this.selected == e.value) {
				_this.selectedText = e.text;
			}
		});
	},
	methods: {
		open: function() {
			this.show = !this.show;
		},
		select: function(index) {
			this.$emit('click', this.menus[index]);
			this.show = !this.show;
			this.selectedText = this.menus[index].text;
		}
	}
};
</script>

<style lang="scss">
.bg {
	background-color: rgba(82, 76, 76, 0.5);
	width: 100%;
	height: 1000px;
	position: fixed;

	z-index: 999;
}

.dropdown {
	position: relative;
	display: inline-block;
	height: 100%;
	width: 100%;

	.current {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.dropbtn {
		height: 100%;
		border: none;
		cursor: pointer;
		text-align: center;
		line-height: 90upx;
		vertical-align: middle;
	}
	.icons {
		width: 40upx;
		height: 40upx;
		background-image: url('/static/img/drop-list/icons.png');
	}
}

.dropdown-content {
	text-align: center;
	background-color: #ffffff;
	border-bottom-left-radius: 10%;
	border-bottom-right-radius: 10%;

	image {
		height: 40upx;
		width: 40upx;
		margin-right: 10upx;
		border-radius: 50%;
	}
	.selected {
		color: #f33e54;
	}
	view {
		color: black;
		padding: 20upx 30upx;
		text-decoration: none;
		display: block;
	}
}
</style>
